<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>sql执行接口 - adhoc</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="./favicon.ico" />
    <script type="text/javascript" src="js/plugin/jquery.min.js"></script>
    <script type="text/javascript" src="js/plugin/fullscreen.js"></script>
    <script type="text/javascript" src="js/plugin/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="js/plugin/echarts/charts.js"></script>
    <script type="text/javascript" src="js/plugin/tablesorter/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="js/apiTest.js"></script>
    <script type="text/javascript" src="js/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/plugin/bootstrap-3.3.5/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="js/plugin/bootstrap-3.3.5/js/defaults-zh_CN.min.js"></script>
    <script type="text/javascript" src="js/plugin/jsonview-v1.2.0/dist/jquery.jsonview.js"></script>
    <script type="text/javascript" src="js/plugin/echarts/charts.js"></script>
    <script type="text/javascript" src="js/sybn_bootstrap.js"></script>
    <script type="text/javascript" src="js/sybn_common.js"></script>
    <script type="text/javascript" src="js/sybn_desc_table.js"></script>
    <script type="text/javascript" src="js/plugin/sql/codemirror.js"></script>
    <script type="text/javascript" src="js/plugin/sql/matchbrackets.js"></script>
    <script type="text/javascript" src="js/plugin/sql/sql.js"></script>
    <script type="text/javascript" src="js/plugin/sql/show-hint.js"></script>
    <script type="text/javascript" src="js/plugin/sql/sql-hint3.js"></script>
    <script type="text/javascript" src="js/plugin/sql/sql-hint-sybn.js"></script>
    <script type="text/javascript" src="js/plugin/gzip/pako.min.js"></script>
    <script type="text/javascript" src="js/plugin/gzip/base64_gzip.js"></script>
    <script type="text/javascript" src="js/sybn_demo_sql.js"></script>
    <script type="text/javascript" src="js/login_simple.js"></script>
    <script type="text/javascript" src="js/plugin/clipboard/clipboard.min.js"></script>
    <link rel="stylesheet" href="css/fontawesome-4.2.0_ie7/4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="js/plugin/bootstrap-3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="js/plugin/bootstrap-3.3.5/css/bootstrap-select.min.css" />
    <link rel="stylesheet" href="js/plugin/jsonview-v1.2.0/dist/jquery.jsonview.css" />
    <link rel="stylesheet" href="js/plugin/tablesorter/theme.default.min.css" />
    <link rel="stylesheet" href="css/plugin/sql/codemirror.css" />
    <link rel="stylesheet" href="css/plugin/sql/show-hint.css" />
    <link rel="stylesheet" href="css/bootstrap_sybn_custom.css" />
    <link rel="stylesheet" href="css/api_test.css" />
    <style>
        .form-control.CodeMirror{height:230px; width:100%;}
        .panel_type_xs .form-control.CodeMirror{height: 95px;width:100%;}
        .sql_input_big .form-control.CodeMirror{height: 500px}
        .sql_input_big .iframe_preview {max-height: 400px;}
        .sql_input_big2 .form-control.CodeMirror{height: 800px}
        .sql_input_big2 .iframe_preview {max-height: 500px;}
        .btn-group-xs .btn.common_use_select {padding: 0px 5px; font-size: 10px; line-height: 1.0;}
        .common_use {margin-right: 10px;}
        .iframe-container {
    position: relative;
    width: 100%;
    height: 500px; /* 根据需要调整高度 */
}

.loading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: relative;
    z-index: 1;
}
    </style>
</head>
<body>

<ul class="nav nav-tabs">
    <li><strong class="title">即席分析(adhoc)</strong></li>
    <li class="active"><a href="#p_select_gbi" data-toggle="tab" aria-expanded="false">人工智能查询</a></li>
    <li class=""><a href="#p_info" data-toggle="tab" aria-expanded="false">关于</a></li>
</ul>
<div class="tab-content">

    <div id="p_select_gbi" class="panel panel-primary tab-pane active sybn-api-demo">

         <div class="panel-heading text-primary btn-group-xs">
             <span class="p_title"> gbi - AI智能问答, 当前支持查询生产环境的部分报表(T05,M01,R01,H01,S01等)相关问题, 阿里云收取查询资费0.8元/次提问 </span>

             <span class="common_use floatRight">常用问题:
             <select class="btn btn-default common_use_select" title="常用问题" onchange="setGbiFun(this)">
                 <option value="">请选择</option>
                 <option value="哪个省份票房最高">哪个省份票房最高</option>
                 <option value="最近半年哪个影院票房最高">最近半年哪个影院票房最高</option>
                 <option value="最近三个月票房走势">最近三个月票房走势</option>
             </select>
             </span>
         </div>

        <div class="panel-body sybn-api-demo collapse in">

            <div class="input-group input-group-xs sql_textarea_parent">
                <textarea name="gbi" rows="5" class="form-control" style="height:100px;">哪几个省份票房最高</textarea>
                <span class="btn-group-vertical input-group-addon btn-group-xs padding0">
                    <span class="btn btn-default gbiApi submit">提问</span>
                </span>
            </div>
            <div class="input-group input-group-xs iframe-container" style="width:100%; height:500px;">
                <div class="loading-indicator" id="loadingIndicator">
                    <div class="spinner"></div>
                    <p id="view_param">Loading...</p>
                </div>
                <iframe id="iframe_1" src="about:blank" style="width:100%; height:500px;"></iframe>
            </div>
        </div>
    </div>

    <div id="p_info" class="panel panel-primary tab-pane">
        <div class="panel-heading text-primary">
            <span class="p_title">关于 About</span>
        </div>
        <div class="panel-body sybn-api-demo collapse in">

            <div class="panel panel-success w100">
                <div class="panel-heading text-primary">
                    <span class="p_title">服务器状态</span>
                </div>
                <div class="panel-body sybn-api-demo collapse in">
                    <iframe title="info" class="json_iframe" src="info_vue.html?r=60"></iframe>
                </div>
            </div>

            <div class="panel panel-success w100">
                <div class="panel-heading text-primary">
                    <span class="p_title">重要更新: 2024-04-02</span>
                </div>
                <div class="panel-body collapse in change_log">
                    <p>
                        <strong>2025-01-02</strong><br/>
                        <span class="change_log_line"><a href="js/plugin/gzip/gzip.html" target="_blank">gzip工具</a></span>
                    </p>
                    <p>
                        <strong>2024-04-02</strong><br/>
                        <span class="change_log_line">
                            <span>sql 翻译工具: </span>
                            <a href="js/plugin/mergely/examples/replace_clickhouse.html" target="_blank">to clickhouse </a> |
                            <a href="js/plugin/mergely/examples/replace_holo.html" target="_blank">to holo </a> |
                            <a href="js/plugin/mergely/examples/replace_flink.html" target="_blank">to flink </a>
                        </span>
                        <br/>
                        <span class="change_log_line">
                            <span>对比工具: </span>
                            <a href="js/plugin/mergely/examples/compare_tables.html" target="_blank">列表相似度对比 </a>
                        </span>
                    </p>
                    <p>
                        <strong>2023-05-29</strong><br/>
                        <span class="change_log_line"><a href="js/plugin/viz/viz_java.html" target="_blank">java调用关系图</a></span>
                    </p>
                    <p>
                        <strong>2022-12-23</strong><br/>
                        <span class="change_log_line"><a href="js/plugin/viz/viz_join.html" target="_blank">表join关系图</a></span>
                    </p>
                    <p>
                        <strong>2022-06-28</strong><br/>
                        <span class="change_log_line">允许查询es数组字段</span>
                    </p>
                    <p>
                        <strong>2022-04-13</strong><br/>
                        <span class="change_log_line">表结构提示 (表名后面按 alt 键查看 create table) 支持动态数据源</span>
                    </p>
                    <p>
                        <strong>2022-04-07</strong><br/>
                        <span class="change_log_line"><a href="js/plugin/mergely/examples/simple.html" target="_blank">文本对比工具</a></span>
                    </p>
                    <p>
                        <strong>2021-10-01</strong><br/>
                        <span class="change_log_line">允许使用 mybatis 查询.</span>
                    </p>
                    <p>
                        <strong>2020-05-26</strong><br/>
                        <span class="change_log_line"><a href="js/plugin/viz/viz_template2.html?table=dim_oristar_cmc_base_sale_channel" target="_blank">表关系图</a></span><br/>
                        <!--                        <span  class="change_log_line"><a href="js/plugin/viz/viz_template2.html?table=CINEMA.dw_pos_movie_ticket_order_collect&action=all" target="_blank">表关系图</a></span><br/>-->
                    </p>
                    <p>
                        <strong>2020-02-06</strong><br/>
                        <span class="change_log_line"><a href="sql_translate.html" target="_blank">sql转换</a></span>
                    </p>
                </div>
            </div>
        </div>
    </div>


    <div style="display: none;">
        <table summary="" id="defaultsTemplate" class="tableTemplate tablesorter tablesorter-default" style="display: none;">
            <thead class="thTemplate">
                <tr class="info textCenter"><th scope="col" style="display: none;"> </th></tr>
            </thead>
            <tbody class="trTemplate">
                <tr class="tinfo phrase_tr" data-id="#{id}"> </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
// SQL语句高亮
window.onload = function() {
    $('body').on('click', '.gbiApi', function(e) {
        // 主接口地址
        var api = $(this).data("api") || "api/ai/gbi.do";

        var s = $('[name=gbi]').val();

        loadingIndicator.style.display = 'block';
        document.getElementById('view_param').innerHTML = s + "<br/>思考中...";
        document.getElementById('iframe_1').src = api + "?s="+encodeURIComponent(s);
    });
    $(".view_param").empty().append($(".view_param_1").clone().children());

    var panel_type = getQueryString("panel_type");
    if (panel_type == 'xs') {
        $("body").addClass("panel_type_xs")
    }
};

const loadingIndicator = document.getElementById('loadingIndicator');
loadingIndicator.style.display = 'none';
document.addEventListener("DOMContentLoaded", function() {
    const iframe = document.getElementById('iframe_1');

    iframe.addEventListener('load', function() {
        loadingIndicator.style.display = 'none';
    });

    iframe.addEventListener('error', function() {
        loadingIndicator.style.display = 'none';
        alert('Failed to load the iframe content.');
    });
});

    // 设置sql
var setGbiFun = function(t) {
        var setGbi;
        if (typeof t != 'string' && t.value != undefined) {
             setGbi = t.value;
        }
        if (!setGbi) {
            return;
        }
        var s = $('[name=gbi]').val(setGbi);
}
</script>
</html>
